<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <script>
        function checkForm(){
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value;
            alert(username+" : "+password);
            let flag=true;
            let jj=/^[0-9]{1}[a-z0-9A-Z]{3,6}/;
            if(jj.test(username)){
                let userGObj=document.getElementById("usernameG");
                userGObj.innerHTML="<font color='lime'>√</font>";

            }else{
                let userGObj=document.getElementById("usernameG");
                userGObj.innerHTML="<font color='#dc143c'> ×用户名不能使用</font>";
                flag=false;
            }
            if(jj.test(password)){

                let pwdGObj = document.getElementById("passwordG");
                pwdGObj.innerHTML = "<font color='lime'>√</font>";
            }else{
                let pwdMsgObj = document.getElementById("passwordG");
                pwdMsgObj.innerHTML = "<font color='#dc143c'>×密码不能使用</font>";
                flag = false;
            }
            return flag;

        }
    </script>
</head>
<body>
<form action="https://www.itheima.com" onsubmit="return checkForm()">
用户名: <input type="text" name="username" id="username"/>
<span id="usernameG"></span>
<br>
密码: <input type="password" name="password" id="password"/>
<span id="passwordG"></span>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>